<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">房间类型</span>
      <k-select
        v-model="listQuery.type"
        class="filter-item room-type"
        type="1"
        :select-params="typeList"
        @handleSelectEvent="rollRoomhandleFilter"
      />
      <div v-show="listQuery.type === 2" class="filter-item">
        <span class="filter-title filter-item">创建人</span>
        <k-select
          v-model="listQuery.belongId"
          class="filter-item user-status"
          type="1"
          :custom-params="{opations:belongList, label:'lineName',value:'lineId'}"
          @handleSelectEvent="handleFilter"
        />
      </div>
      <span class="filter-title filter-item">房间状态</span>
      <k-select
        v-model="listQuery.status"
        class="filter-item user-status"
        type="1"
        :select-params="[{label:'未开始',value: 0},{label:'进行中',value: 1},{label:'已结束',value: 2},{label:'已取消',value: 3}]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">建房时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="handleFilter"   type="datetimerange"
        valueFormat="yyyy-MM-dd HH:mm:ss"/>
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="请输入关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <!-- 创建 roll 房 -->
    <k-button
      v-if="authorityHandle([32,34,35,36],true)"
      class="top-btn"
      value="创建 roll 房"
      @click.native="creatRollRoomDialog"
    />
    <!-- 玩法介绍 -->
    <!-- <k-button class="top-btn" value="玩法介绍" @click.native="ruleGuideDialog" /> -->
    <!--表格相关 -->
    <el-table
      :data="rollTableData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column min-width="120px" label="房间信息" align="center">
        <el-table-column prop="name" min-width="100px" label="房间名称" align="center" show-overflow-tooltip />
        <el-table-column prop="belongName" min-width="100px" label="房间归属人" align="center" show-overflow-tooltip />
        <el-table-column prop="duration" min-width="150px" label="持续时间" align="center" show-overflow-tooltip />
        <el-table-column prop="duration" min-width="150px" label="注册时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.registerStartTime }} - {{ scope.row.registerEndTime }}
          </template>
        </el-table-column>
        <el-table-column prop="duration" min-width="150px" label="消费时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.payStartTime }} - {{ scope.row.payEndTime }}
          </template>
        </el-table-column>

        <el-table-column prop="statusName" min-width="100px" label="房间状态" align="center" show-overflow-tooltip />
        <el-table-column prop="crtTime" min-width="100px" label="创建时间" align="center" show-overflow-tooltip />
        <el-table-column prop="chargeValue" min-width="90px" label="低充(购卡积分)" align="center" />
        <el-table-column min-width="80px" label="排序" align="center">
          <editable-cell
            v-model="row.sort"
            slot-scope="{row}"
            :show-input="row.editMode"
            @keyup.enter.native="upRollRoomSort(row)"
          >
            <span slot="content" style="display: flex;align-items: center;">{{ row.sort }}</span>
          </editable-cell>
        </el-table-column>
      </el-table-column>
      <el-table-column min-width="200px" label="参与人信息" align="center">
        <el-table-column min-width="120px" label="参与名单" align="center">
          <template slot-scope="scope">
            <div class="cell-baby">
              <span class="ellipsis-span" :title="scope.row.partakeUserName">{{ scope.row.partakeUserName }}</span>
              <span
                v-show="scope.row.partakeUserName"
                style="color:#3b425d;margin-left:10px"
                @click="openuserListDialog(scope.row.id)"
              >详情</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="countMin" min-width="100px" label="人数下限" align="center" />
        <el-table-column prop="countMax" min-width="100px" label="人数上限" align="center" />
        <el-table-column prop="winnerNames" min-width="120px" label="获奖名单" align="center">
          <template slot-scope="scope">
            <div class="cell-baby">
              <span class="ellipsis-span" :title="scope.row.winnerNames">{{ scope.row.winnerNames }}</span>
              <span
                v-show="scope.row.winnerNames"
                style="color:#3b425d;margin-left:10px"
                @click="shouWinnerReslut(scope.row.id)"
              >详情</span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column min-width="200px" label="饰品信息" align="center">
        <el-table-column prop="goodsName" min-width="150px" label="房间饰品" align="center">
          <template slot-scope="scope">
            <div class="cell-baby">
              <span class="ellipsis-span" :title="scope.row.goodsName">{{ scope.row.goodsName }}</span>
              <span
                v-show="scope.row.goodsName"
                style="color:#3b425d;margin-left:10px"
                @click="shouWinnerReslut(scope.row.id)"
              >详情</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsValue" min-width="100px" label="饰品总价值(F)" align="center" />
        <el-table-column prop="goodsCount" min-width="100px" label="饰品数量" align="center" />
      </el-table-column>
      <el-table-column min-width="130px" label="roll 房开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.rollSwitch"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开"
            inactive-text="关"
            :active-value="1"
            :inactive-value="0"
            :disabled="authorityHandle([32,34,35,36],false)"
            @change="roolRoomState($event,scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="查看/修改" @click.native="updateRollDialog(scope.row)" />
            <!-- <k-button class="table-btn" value="开奖结果" @click.native="shouWinnerReslut(scope.row.id)" /> -->
            <!-- <k-button
              v-if="authorityHandle([32,34,35,36],true)"
              class="table-btn"
              value="添加参与者"
              @click.native="addRobotsDialog(scope.row)"
            /> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 修改饰品数量 弹窗 -->
    <k-dialog
      :show-hide.sync="updateBabyNum.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addZone-dialog"
      title="修改当前饰品数量"
      :show-foot="false"
      :two-btn="true"
      :close-fun="handleCloseDialog"
      @click="saveBabyNum"
    >
      <el-form label-width="200px" class="form-modify">
        <el-form-item label="添加数量：">
          <el-input v-model.number="babyNum" placeholder="请输入数值" />
        </el-form-item>
      </el-form>
    </k-dialog>
    <!-- 创建 roll 房 弹窗 -->
    <k-dialog
      :show-hide.sync="creatRollRoom.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      class-name="creatRollRoom_dialog"
      :show-foot="false"
      :two-btn="authorityHandle([32,34,35,36],true)"
      :close-fun="handleCloseCreateRoom"
      @click="saveRollRoom"
    >
      <div class="dialog_creatRollRoom">
        <el-form ref="ruleForm" :model="rollinfo" label-width="auto" :rules="rules">
          <el-form-item label="roll 房类型：" prop="type">
            <el-select v-model="rollinfo.type" placeholder="请选择类型" @change="rollRoomTypeChange">
              <el-option label="官方" :value="1" />
              <!-- <el-option v-if="authorityHandle([34,35,36],false)" label="官方" :value="1" /> -->
              <el-option label="主播" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="rollinfo.type === 2" label="主播名称：" :prop="rollinfo.type === 2 ? 'belongId':'empty'">
            <el-select v-model="rollinfo.belongId" placeholder="请选择主播">
              <el-option v-for="item in belongList" :key="item.lineId" :label="item.lineName" :value="item.lineId" @click.native="JingcuiShowLine(item)"/>
            </el-select>
            <div v-show="JingcuiShow && rollinfo.belongId">晶粹余额：{{JingcuiVal}}</div>
          </el-form-item>
          <el-form-item label="房间名称：" prop="name">
            <el-input v-model="rollinfo.name" show-word-limit style="width: 50%;" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="房间描述：" prop="description">
            <quill-editor ref="myQuillEditor" v-model="rollinfo.description" :options="editorOption" class="editer" />
          </el-form-item>
          <el-form-item label="持续时间：" prop="timeCotinue">
            <el-date-picker
              v-model="rollinfo.timeCotinue"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="datetimerange"
            />
          </el-form-item>
          <el-form-item label="消费：" prop="chargeType">
            <div class="chargeform">
              <el-select v-model="rollinfo.chargeType" placeholder="请选择类型" style="width:120px;margin-right:10px">
                <el-option label="累计消费" :value="1" />
                <el-option label="期间消费" :value="2" />
              </el-select>
              <el-form-item prop="chargeValue">
                <el-input
                  v-model="rollinfo.chargeValue"
                  onkeyup="value=value.replace(/[^0-9.]/g,'')"
                  placeholder="请输入数值"
                  style="width:140px;"
                />
              </el-form-item>
            </div>
          </el-form-item>

          <el-form-item label="消费时间：" prop="payTimeCotinue">
            <el-date-picker
              v-model="rollinfo.payTimeCotinue"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="payDatetimerange"
            />
          </el-form-item>

          <el-form-item label="注册时间：">
            <div class="chargeform">
              <div>
                <el-date-picker
                  v-model="regTime"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="regTimerange"
                />
              </div>
            </div>
          </el-form-item>

          <el-form-item label="设置密码：">
            <el-input
              v-model="rollinfo.rollPassword"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
              show-password
              placeholder="填写4位数字"
            />
          </el-form-item>
          <el-form-item label="闯关次数：" prop="toConfirmCount">
            <el-input v-model="rollinfo.toConfirmCount" onkeyup="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入闯关次数" />
          </el-form-item>
          <el-form-item label="人数下限：" prop="countMin">
            <el-input v-model="rollinfo.countMin" onkeyup="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入人数" />
          </el-form-item>
          <el-form-item label="人数上限：" prop="countMax">
            <el-input v-model="rollinfo.countMax" onkeyup="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入人数" />
          </el-form-item>
          <el-form-item label="添加饰品：">
            <el-select v-model="goodsValueModel" multiple style="width: 100%;" filterable placeholder="请选择">
              <el-option
                v-for="item in resultList"
                :key="item.lineId"
                :label="item.lineName"
                :value="item.lineId"
                @click.native="selectChange(item)"
              />
            </el-select>
            <div v-show="jewelryPrice && checkedGoodsList.length>0">饰品总值(F)：{{jewelryPrice*10}}</div>
            <div style="margin-top:10px;">
              <el-tag
                v-for="(item ,index) of checkedGoodsList"
                :key="item.goodsId"
                :closable="authorityHandle([32,34,35,36],true)"
                @close="handleBabyTagDelete(index,item)"
                @click="tagclick(item)"
              >
                <span style="color:red">{{ item.size }}(件)</span> {{ item.goodsName }}
              </el-tag>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 参与人名单 -->
    <k-dialog
      :show-hide.sync="userListDialog.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="参与人名单"
      class-name="creatRollRoom_dialog"
      :show-foot="false"
      :two-btn="false"
    >
      <div class="room-box">
        <div class="user-info" style="transform: translateY(-10px);">玩家:{{ userCount }} 主播:{{ extensionCount
        }} AI:{{ robotCount }}</div>
        <div class="grid-div" style="margin-top: 10px;">
          <div
            v-for="item in rolluserdata"
            :key="item.lineId"
            :title="item.lineName"
            class="item"
            :class="[{'black':item.roleId == 2},{'blue':item.roleId == 3},{'purple':item.roleId == 4}]"
          >{{ item.lineName
          }}</div>
        </div>
      </div>
    </k-dialog>
    <!-- 玩法介绍 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="玩法介绍"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="authorityHandle([32,34,35,36],true)"
      @click="guideSave"
    >
      <div class="dialog-ruleGuide" style="padding:30px">
        <el-form :model="ruleGuideContent" label-width="auto">
          <el-form-item label="内容介绍：" prop="content">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="ruleGuideContent.content"
              :options="editorOption"
              class="editer"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 添加AI 弹窗 -->
    <k-dialog
      :show-hide.sync="addRobots.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加AI"
      class="addBox_dialog"
      :two-btn="true"
      :close-fun="addRobotCloseDialog"
      @click="saveRobotData"
    >
      <el-form :model="rollinfo" label-width="auto">
        <el-form-item label="AI：">
          <el-select v-model="robotsModel" multiple style="width: 100%;" filterable placeholder="请选择">
            <el-option
              v-for="item in robotResultList"
              :key="item.lineId"
              :label="item.lineName"
              :value="item.lineId"
              @click.native="userselectChange(1,item)"
            />
          </el-select>
          <div style="margin-top:10px;margin-bottom:80px">
            <el-tag
              v-for="(item ,index) of checkedRobotResultList"
              :key="item.lineId"
              closable
              @close="handleUserTagDelete(1,index)"
            >
              {{ item.lineName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="推广用户：">
          <el-select v-model="extensionModel" multiple style="width: 100%;" filterable placeholder="请选择">
            <el-option
              v-for="item in extensionList"
              :key="item.lineId"
              :label="item.lineName"
              :value="item.lineId"
              @click.native="userselectChange(2,item)"
            />
          </el-select>
          <div style="margin-top:10px;margin-bottom:80px">
            <el-tag
              v-for="(item ,index) of checkedExtensionList"
              :key="item.lineId"
              closable
              @close="handleUserTagDelete(2,index)"
            >
              {{ item.lineName }}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
    </k-dialog>
  </div>
</template>
<script>
import { listData, getGoodsPlatformList, save, update, updateSort, getRollUsers, updateSwitch, introduceSave, getIntroduce, getRobots, getExtensions, addRobots } from '@/api/rules/listdata'
import { getAnchors } from '@/api/user/user'
import Pagination from '@/components/Pagination'
import EditableCell from '@/components/EditableCell'
import {num_add,num_subtract,num_multiply}from '@/utils'
export default {
  components: { Pagination, EditableCell },
  data() {
    return {
      typeList: [{ label: '官方', value: 1 }, { label: '主播', value: 2 }],
      rules: {
        type: [
          { required: true, message: '请选择roll 房类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入房间描述', trigger: 'blur' }
        ],
        belongId: [
          { required: true, message: '请选择主播名称', trigger: 'change' }
        ],
        countMin: [
          { required: true, message: '请输入人数', trigger: 'blur' }
        ],
        countMax: [
          { required: true, message: '请输入人数', trigger: 'blur' }
        ],
        chargeType: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        chargeValue: [
          { required: true, message: '请输入数值', trigger: 'blur' }
        ],
        timeCotinue: [
          { required: true, message: '请选择持续区间', trigger: 'blur' }
        ],
        payTimeCotinue: [
          { required: true, message: '请选择消费区间', trigger: 'blur' }
        ]
      },
      babyNum: 1,
      currentRollId: undefined,
      currentBabyId: undefined,
      rollType: undefined,
      resultList: [],
      checkedGoodsList: [],
      robotResultList: [],
      checkedRobotResultList: [],
      extensionList: [],
      checkedExtensionList: [],
      belongList: [],
      goodsValueModel: [],
      extensionModel: [],
      robotsModel: [],
      rolluserdata: [],
      dialogStatus: 'create',
      textMap: {
        update: '修改 Roll 房',
        create: '创建 Roll 房'
      },
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        type: undefined, // 走不同方法 不需要前端传递",
        belongId: undefined, // 房间归属人,
        status: undefined, // 房间状态",
        startTime: undefined, // 饰品外观',
        endTime: undefined, // 饰品类别',
        key: '' // 箱子名称或关键词 箱子配置界面所用'
      },
      value1: 1,
      rollTableData: [],
      ruleGuideContent: {
        content: ''
      },
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'] // 上传图片、上传视频
          ]
        }
      },
      probility: {
        prob: ''
      },
      pickerOptions: {
        disabledDate(time) {
          // const maxToday = new Date()
          // maxToday.setTime(maxToday.getTime() - 24 * 60 * 60 * 1000)
          // maxToday.setHours(23, 59, 59, 999)
          // return time.getTime() <= maxToday.getTime()
        }
      },
      rollinfo: {
        id: undefined, // roll房类型",
        name: '', // 房间名称",
        belongId: undefined, // 房间归属人",
        status: undefined, // 房间状态0未开始1进行中2已结束3已取消",
        creator: undefined, // 创建人",
        crtTime: '', // 创建时间",
        timeStart: '', // 开始时间",
        timeEnd: '', // 结束时间",
        sort: undefined, // 排序字段",
        rollPassword: undefined, // 排序字段",
        countMax: undefined, // 人数上限",
        countMin: undefined, // 人数下限",
        goodsValue: '', // 饰品总价值",
        goodsCount: undefined, // 饰品数量",
        description: '', // 房间描述",
        belongName: '', // 归属人",
        type: undefined, // roll房类型 1官方 2主播",
        chargeValue: undefined, // 消费类型",
        chargeType: undefined, // 消费金额",
        rollSwitch: undefined,
        userIds: [], // roll房用户",
        // goodIds: [], // roll房饰品"
        goodsList: [],
        registerStartTime: '',
        registerEndTime: '',
        toConfirmCount: '',
        timeCotinue: [], // 为了添加表单的 prop, 传参记得删除
        payTimeCotinue: [] // 为了添加表单的 prop, 传参记得删除,
      },
      regTime: '',
      timeValue: '',
      conditions: {
        keyword: null
      },
      creatRollRoom: {
        showHide: false
      },
      userListDialog: {
        showHide: false
      },
      ruleGuide: {
        showHide: false
      },
      addRobots: {
        showHide: false
      },
      updateBabyNum: {
        showHide: false
      },
      extensionCount: '',
      robotCount: '',
      userCount: '',
      JingcuiShow:false,// 晶粹余额展示
      JingcuiVal:0,// 晶粹余额展示
      jewelryPrice:0,// 饰品总价值
      originalValue:0,
      originalPrice:0,
      totalValue:0
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    // if (this.authorityHandle([34, 35, 36], true)) {
    //   this.typeList = [{ label: '主播', value: 2 }]
    // }
    this.loadData()
    this.getIntroduce()
  },
  methods: {
    tagclick(item) {
      if (this.authorityHandle([32, 34, 35, 36], false)) {
        return
      }
      this.currentBabyId = item.goodsId
      this.babyNum = item.size
      this.updateBabyNum.showHide = true
    },
    handleBabyTagDelete(index,item) {
      console.log(this.jewelryPrice,item);
      this.jewelryPrice = num_subtract(this.jewelryPrice,item.price)
      this.checkedGoodsList.splice(index, 1)
      this.goodsValueModel.splice(index, 1)
    },
    handleUserTagDelete(flag, index) {
      if (flag === 1) {
        this.checkedRobotResultList.splice(index, 1)
        this.robotsModel.splice(index, 1)
      } else {
        this.checkedExtensionList.splice(index, 1)
        this.extensionModel.splice(index, 1)
      }
    },
    saveBabyNum() {
      this.originalValue = 0
      this.totalValue = 0
      let price= 0
      let aaa = 0
      this.checkedGoodsList.map((item)=>{
        if (item.goodsId === this.currentBabyId) {
          this.$set(item,'originalPrice',num_multiply(item.price,item.size))
          aaa = item.originalPrice
          item.size = this.babyNum;
          console.log(item);
          console.log(item.price,item.size,item.originalPrice);
          this.originalPrice = item.originalPrice
          this.originalValue= item.price;
          this.totalValue= num_multiply(item.price,item.size);
        }
      })
      price = num_add(num_subtract(this.jewelryPrice,this.originalPrice),this.totalValue)
      this.jewelryPrice  = price
      this.handleCloseDialog()
    },
    // 晶粹
    JingcuiShowLine(item){
      if(item.lineId != -1){
        this.JingcuiVal = Number(item.price) || 0
        this.JingcuiShow = true
      }else{
        this.JingcuiShow = false
      }
     
    },
    // 创建rooll 房里边的饰品选择事件
    selectChange(item) {
      console.log(this.jewelryPrice,item.price);
      this.jewelryPrice = num_add(this.jewelryPrice,item.price)
      console.log(this.checkedGoodsList);
      const itemIndex = this.checkedGoodsList.findIndex((v) => {
        return v.goodsId === item.lineId
      })
      if (itemIndex === -1) {
        this.checkedGoodsList.push({ 'goodsName': item.lineName, 'goodsId': item.lineId, size: 1,price:item.price })
      } else {
        this.checkedGoodsList.splice(itemIndex, 1)
      }
      // this.rollinfo.goodIds = value
      this.rollinfo.goodsList = this.checkedGoodsList
      this.$log(this.checkedGoodsList)
    },
    // 添加参与者
    userselectChange(flag, item) {
      if (flag === 1) {
        const itemIndex = this.checkedRobotResultList.findIndex((v) => {
          return v.lineId === item.lineId
        })
        if (itemIndex === -1) {
          this.checkedRobotResultList.push(item)
        } else {
          this.checkedRobotResultList.splice(itemIndex, 1)
        }
      } else {
        const itemIndex = this.checkedExtensionList.findIndex((v) => {
          return v.lineId === item.lineId
        })
        if (itemIndex === -1) {
          this.checkedExtensionList.push(item)
        } else {
          this.checkedExtensionList.splice(itemIndex, 1)
        }
      }
      // this.rollinfo.goodIds = value
      this.rollinfo.goodsList = this.checkedGoodsList
      this.$log(this.checkedGoodsList)
    },
    // 关闭修改弹窗
    handleCloseDialog() {
      this.updateBabyNum.showHide = false
    },
    loadData() {
      listData(this.listQuery).then(res => {
        this.totalRows = res.data.totalRows
        this.rollTableData = []
        this.rollTableData = res.data.rows.map(row => {
          return {
            ...row,
            editMode: false
          }
        })
      })
    },
    // 请求AI返回列表
    requestRobotsReslutList() {
      getRobots({ type: this.rollType, rollId: this.currentRollId }).then(res => {
        this.robotResultList = []
        Object.assign(this.robotResultList, res.data.data)
      })
    },
    // 请求推广用户返回列表
    requestReslutList() {
      getExtensions({ type: this.rollType, rollId: this.currentRollId }).then(res => {
        this.extensionList = []
        Object.assign(this.extensionList, res.data.data)
      })
    },
    // 保存 AI数据
    saveRobotData() {
      const tmpRobotList = this.checkedRobotResultList.map(item => {
        return item.lineId
      })
      const tmpUserList = this.checkedExtensionList.map(item => {
        return item.lineId
      })
      let ids = []
      ids = ids.concat(tmpRobotList, tmpUserList)
      this.$log()
      if (ids.length < 1) {
        this.$message.error('请选择参与者添加！')
        return
      }
      addRobots({ 'ids': ids, 'rollId': this.currentRollId }).then(res => {
        if (res.data.success) {
          this.$message.success('保存成功')
          this.loadData()
          this.addRobots.showHide = false
        } else {
          this.$message.success(res.data.msg)
        }
      })
      this.resetRobotDialogData()
      this.addRobots.showHide = false
    },
    // 重置添加AI数据
    resetRobotDialogData() {
      this.checkedRobotResultList = []
      this.checkedExtensionList = []
      this.robotsModel = []
      this.extensionModel = []
    },
    addRobotCloseDialog() {
      this.addRobots.showHide = false
      this.resetRobotDialogData()
    },
    // 参与人名单
    getRollUsers(id) {
      getRollUsers({ 'rollId': id }).then(res => {
        this.rolluserdata = res.data.data.list
        this.extensionCount = res.data.data.extensionCount
        this.robotCount = res.data.data.robotCount
        this.userCount = res.data.data.userCount
      })
    },
    // 保存玩法管理
    guideSave() {
      const contents = this.ruleGuideContent.content
      introduceSave({ 'introduce': contents }).then(res => {
        this.ruleGuide.showHide = false
      })
    },
    // 加载玩法管理
    getIntroduce() {
      getIntroduce().then(res => {
        this.ruleGuideContent.content = res.data.data
      })
    },
    handleCloseCreateRoom() {
      this.$refs.ruleForm.resetFields()
    },
    // 保存roll房
    saveRollRoom() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const parme = { ...this.rollinfo }
          delete parme.timeCotinue
          delete parme.payTimeCotinue
          if (this.dialogStatus === 'create') {
            save(parme).then(res => {
              if (res.data.success) {
                this.$message.success('保存成功')
                this.$resetForm(this.rollinfo)
                this.creatRollRoom.showHide = false
                this.loadData()
              } else this.$message.error(res.data.msg)
            })
          } else {
            update(parme).then(res => {
              if (res.data.success) {
                this.$message.success('修改成功')
                this.$resetForm(this.rollinfo)
                this.creatRollRoom.showHide = false
                this.loadData()
              } else this.$message.error(res.data.msg)
            })
          }
        }
      })
    },
    creatRollRoomDialog() {
      this.$resetForm(this.rollinfo)
      this.regTime = ''
      this.payTimeCotinue = ''
      this.goodsValueModel = []
      this.checkedGoodsList = []
      this.dialogStatus = 'create'
      this.getGoodsPlatformList()
      this.creatRollRoom.showHide = true
      this.jewelryPrice = 0
      this.JingcuiVal = 0
    },
    updateRollDialog(row) {
      this.jewelryPrice = 0
      this.getGoodsPlatformList()
      this.goodsValueModel = []
      this.dialogStatus = 'update'
      this.creatRollRoom.showHide = true
      this.rollinfo.id = row.id // roll房类型",
      this.rollinfo.belongId = row.belongId
      this.rollinfo.belongName = row.belongName
      this.rollinfo.chargeType = row.chargeType
      this.rollinfo.chargeValue = row.chargeValue
      this.rollinfo.rollPassword = row.rollPassword
      this.rollinfo.countMax = row.countMax
      this.rollinfo.countMin = row.countMin
      this.rollinfo.crtTime = row.crtTime
      this.rollinfo.description = row.description
      // this.rollinfo.goodIds = row.goodsList
      this.rollinfo.goodsList = row.goodsList
      this.rollinfo.goodsValue = row.goodsValue
      this.rollinfo.name = row.name
      this.rollinfo.timeStart = row.timeStart
      this.rollinfo.timeEnd = row.timeEnd
      this.rollinfo.type = row.type
      this.rollinfo.userIds = row.userIds
      this.rollinfo.toConfirmCount = row.toConfirmCount == 0 ? '' : row.toConfirmCount
      this.rollinfo.timeCotinue = [row.timeStart === null ? '' : row.timeStart, row.timeEnd === null ? '' : row.timeEnd]
      this.rollinfo.payTimeCotinue = [row.payStartTime === null ? '' : row.payStartTime, row.payEndTime === null ? '' : row.payEndTime]
      this.regTime = [row.registerStartTime === null ? '' : row.registerStartTime, row.registerEndTime === null ? '' : row.registerEndTime]
      this.rollinfo.payStartTime = row.payStartTime === null ? '' : row.payStartTime
      this.rollinfo.payEndTime = row.payEndTime === null ? '' : row.payEndTime
      this.goodsValueModel = row.goodsList.map(item => {
        return item.goodsId
      })
      this.checkedGoodsList = row.goodsList
      this.jewelryPrice = row.goodsValue
      if (row.type === 2) {
        this.getAnchors()
      }
    },
    // 查看开奖结果
    shouWinnerReslut(rollId) {
      this.$router.push({ path: '/rootplayrules/lottery-result', query: { id: rollId }})
    },
    // 请求饰品
    getGoodsPlatformList() {
      getGoodsPlatformList({ 'key': '', 'alreadyIds': '[-1]' }).then(res => {
        this.resultList = []
        Object.assign(this.resultList, res.data)
      })
    },
    // roll 房状态
    roolRoomState(event, scope) {
      this.$log(scope.row.rollSwitch)
      updateSwitch({ 'rollId': scope.row.id, 'rollSwitch': scope.row.rollSwitch }).then(res => {
        this.$log(res)
      })
    },
    // 房间排序
    upRollRoomSort(row) {
      this.$log(row)
      const obj = { 'sort': row.sort, 'rollId': row.id }
      updateSort(obj).then(res => {
        if (!res.data.success) {
          this.$message.error(res.data.msg)
          row.sort = ''
        }
        this.$log(res)
      })
    },
    // 肉房持续时间区间选择
    datetimerange(timeValue) {
      console.log(timeValue);
      this.rollinfo.timeStart = this.rollinfo.timeCotinue ? timeValue[0] : null
      this.rollinfo.timeEnd = this.rollinfo.timeCotinue ? timeValue[1] : null
    },
    // 肉房持续时间区间选择
    payDatetimerange(timeValue) {
      this.rollinfo.payStartTime = this.rollinfo.payTimeCotinue ? timeValue[0] : null
      this.rollinfo.payEndTime = this.rollinfo.payTimeCotinue ? timeValue[1] : null
    },

    // roll房内注册时间
    regTimerange(timeValue) {
      this.rollinfo.registerStartTime = this.regTime ? timeValue[0] : null
      this.rollinfo.registerEndTime = this.regTime ? timeValue[1] : null
    },

    rollRoomTypeChange(value) {
      if (value === 2) {
        this.getAnchors()
      } else {
        this.belongList = []
      }
    },
    // 获取主播房间的创建人
    getAnchors() {
      if (this.belongList.length === 0) {
        getAnchors().then(res => {
          this.belongList = res.data.data
        })
      }
    },
    // 搜索查询事件
    rollRoomhandleFilter(value) {
      this.listQuery.pager.pageNo = 1
      this.loadData()
      if (value === 2) { this.getAnchors() }
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },

    openuserListDialog(id) {
      this.getRollUsers(id)
      this.userListDialog.showHide = true
    },
    handleClose() {
      this.userListDialog.showHide = false
    },
    ruleGuideDialog() {
      this.ruleGuide.showHide = true
    },
    addRobotsDialog(row) {
      this.currentRollId = row.id
      this.rollType = row.type
      this.addRobots.showHide = true
      this.requestRobotsReslutList()
      this.requestReslutList()
    }
  }

}
</script>
<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .room-type,
  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.room-box {
  .user-info {
    text-align: right;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .grid-div {
    display: grid;
    grid-template-columns: repeat(7, 120px);

    .item {
      height: 50px;
      font-size: 14px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #E3E2E7;
      width: 120px;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 10px;

      &.black {
        color: #000;
      }

      &.blue {
        color: blue;
      }

      &.purple {
        color: purple;
      }
    }
  }
}

.top-btn {
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;

  &:nth-of-type(2) {
    margin-left: 10px;
  }
}

.kSelect .el-select .el-input .el-input__inner {
  width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}

::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
  float: none;
}

.dialog_creatRollRoom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 40px 80px;

  // ::v-deep .el-select .el-select__tags>span {
  //   display: none;
  // }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;

    ::v-deep .el-tag__close {
      color: $mainColor;
    }

    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}

.form-modify {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 10px 80px;
}

.editer {
  width: 500px;
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;

  ::v-deep .ql-container {
    height: 270px;
    border-radius: 0px 0px 8px 8px;
  }

  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}

.chargeform {
  display: flex;
  flex-direction: row;
}

::v-deep .el-switch__label.is-active {
  color: $mainColor;
}

.addBox_dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;

  ::v-deep .el-dialog__body {
    width: 678px;
    margin: 40px 80px;
  }

  ::v-deep .el-select .el-select__tags>span {
    display: none;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;

    ::v-deep .el-tag__close {
      color: $mainColor;
    }

    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}

.cell-baby {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

}

.ellipsis-span {
  width: 80px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
